import {WidgetClass} from "./widget";

export class WidgetButtonList extends WidgetClass {
  constructor(options = {}) {
    super(options);
    const {ports, UI} = options
    if (UI) {
      this.UI.data = UI.data;
    } else {
      this.UI.data = {
        align: "center",
        itemSize: {
          width: 100,
          height: 50
        },
        itemSpace: {
          mainAxisSpace: 10,
          crossAxisSpace: 50
        },
        itemData: {
          color: "text-color-primary",      // 文字颜色
          activeColor: "text-color-anti",  // 选中颜色
          backGroundColor: "bg-component",      // 底色
          activeBackGroundColor: "brand-color", // 选中底色
          textSize: 14.0, // 文字大小
          iconSize: 14, // 图标大小
          radius: 14, // 圆角
          displayImage: false, // 是否显示图片
        },
        items: [
          {
            icon: "",
            text: "按钮1",
            backgroundImage:"",
            activeBackgroundImage:"",
          },
          {
            icon: "",
            text: "按钮2",
            backgroundImage:"",
            activeBackgroundImage:""
          },
          {
            icon: "",
            text: "按钮3",
            backgroundImage:"",
            activeBackgroundImage:""
          }
        ]
      };
    }
    if (ports) {
      this.ports = ports;
    } else {
      this.ports = this.assembleDefaultPorts();
    }
  }

  assembleDefaultPorts() {
    const superState = super.assembleDefaultPorts();
    return {
      values: [
        ...superState.values,
        {
          name: "选中的按钮",
          key: "selectedIndex",
          type: "int",
          value: 0,
        },
      ],
      events: [
        ...superState.events,
        {
          name: "选中按钮改变",
          key: `valueChange-${this.id}`,
          eventType: "valueChange",
          type: "event",
          action: [
            {
              delay: 0,
              key: null,
              name: "多状态处理",
              portsType: "",
              reType: "iftttLogicList",
              type: "iftttLogicList",
              value: {
                actions: [{
                  key: null,
                  name: "自定义逻辑",
                  type: "iftttLogic",
                  value: {
                    actions: [],
                    andOr: "and",
                    conditions: [
                      {
                        operator: "=",
                        value1: {
                          atomic: this.id,
                          atomicPorts: "selectedIndex",
                          key: "",
                          name: "组件属性：按钮组的选中的按钮",
                          portsType: "int",
                          type: "relatedAtomic",
                          value: `${this.id}.selectedIndex`
                        },
                        value2: {
                          autoType: 0,
                          isCondition: true,
                          key: "",
                          name: "",
                          type: "int",
                          value: 0
                        }
                      },
                      {
                        operator: "=",
                        value1: {
                          atomic: this.id,
                          atomicPorts: "selectedIndex",
                          key: "",
                          name: "组件属性：按钮组的选中的按钮",
                          portsType: "int",
                          type: "relatedAtomic",
                          value: `${this.id}.selectedIndex`
                        },
                        value2: {
                          autoType: 0,
                          isCondition: true,
                          key: "",
                          name: "",
                          type: "int",
                          value: 1
                        }
                      },
                      {
                        operator: "=",
                        value1: {
                          atomic: this.id,
                          atomicPorts: "selectedIndex",
                          key: "",
                          name: "组件属性：按钮组的选中的按钮",
                          portsType: "int",
                          type: "relatedAtomic",
                          value: `${this.id}.selectedIndex`
                        },
                        value2: {
                          autoType: 0,
                          isCondition: true,
                          key: "",
                          name: "",
                          type: "int",
                          value: 2
                        }
                      }
                    ],
                    elseActions: [],
                    enable: true
                  }
                }]
              }
            }
          ],
        }
      ],
    };
  }
}
